@charset "utf-8";
@import "reset.scss";
@import "common.scss";

@keyframes swiper{
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(getvw(-2250));
    }
}
.wrap {
    header {
        width: 100vw;
        padding: getvw(17) 0 getvw(10);
        background-color: white;
        position: fixed;
        top: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 50;
        // 头部icon样式
        .headerIcon {
            img {
                width: getvw(123);
                height: getvw(123);
            }
        }

        // 头部search样式
        .search {
            position: relative;
            input {
                width: getvw(266);
                height: getvw(51);
                border-radius: getvw(10);
                border: 2px solid $orangeC;
            }
            i {
                font-size: getvw(30);
                color: $orangeC;
                position: absolute;
                right: getvw(10);
                top: 50%;
                transform: translateY(-50%);
            }
        }
        .select {
            select {
                width: getvw(159);
                height: getvw(56);
                border: 2px solid $orangeC;
                // 清除下拉框后字体会向右贴,添加边距
                padding-left: 5px;
                // 清除下拉框icon默认样式
                appearance: none;
                background: url(../image/index/城市切换下拉.png) no-repeat right center/getvw(32) getvw(16) transparent;

            }
        }
    }
    main {
        padding-bottom: getvw(300);
        .banner {
            padding-top: getvw(150);
            overflow: hidden;
            ul {
                display: flex;
                animation: swiper 16s linear 0s infinite alternate;
                li {
                    img {
                        width: 100vw;
                        height: getvw(287);
                    }
                }
            }
        }
        .discount {
            padding: 0 getvw(21);
            .titleH {
                @include titleH();
            } 
            .activity {
                display: flex;
                justify-content: space-around;
                flex-wrap: wrap;
                div {
                    img {
                        width: getvw(271);
                        height: getvw(97);
                    }
                }
                div:nth-of-type(1), div:nth-of-type(2) {
                    padding-bottom: getvw(29);
                }
            }
        }
        .love {
            padding: 0 getvw(21);
            .titleH {
                @include titleH();
            }
            .loveList {
                li {
                    position: relative;
                    display: flex;
                    justify-content: flex-start;
                    padding-top: getvw(30);
                    img {
                        width: getvw(211);
                        height: getvw(164);
                    }
                    div {
                        
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        padding-left: getvw(21);
                        p {
                           
                            span {
                                position: absolute;
                                right: getvw(5);
                            }
                        }
                        p:nth-of-type(1) {
                            font-size: getvw(30);
                            line-height: getvw(30);
                            margin-bottom: getvw(18);
                            span {
                                font-size: getvw(22);
                                color: $grayC;
                            }
                        }
                        p:nth-of-type(2) {
                            font-size: getvw(22);
                            line-height: getvw(22);
                            color: $grayC;
                            margin-bottom: getvw(22);
                        }
                        p:nth-of-type(3) {
                            font-size: getvw(32);
                            line-height: getvw(32);
                            color: $orangeC;
                            span {
                                font-size: getvw(22);
                                text-align: right;
                                color: $grayC;
                            }
                        }
                    }
                }
            }
        }
    }
}